import { Carousel, WingBlank } from 'antd-mobile';
import React from 'react';

export default class UcBanner extends React.Component {
    state = {
        data: ['1', '2', '3'],
        imgHeight: 176,
    }
    componentDidMount() {
        // 模拟img加载
        setTimeout(() => {
            this.setState({
                data: ['imges/banner1.png', 'imges/banner2.png', 'imges/banner3.png'],
            });
        }, 1000);
    }
    render() {
        return (
            <WingBlank
                style={{ margin: '0px' }}
            >
                <Carousel
                    autoplay={true}
                    infinite
                >
                    {this.state.data.map(val => (
                        <a href="#section"
                            key={val}
                            // href="http://www.alipay.com"
                            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        >
                            <img
                                src={val}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        </a>
                    ))}
                </Carousel>
            </WingBlank>
        );
    }
}
